<template>
	<div>
		<div class="base-bar">
			<info-bar :menu_title="menu_title" :submenu_title="submenu_title"></info-bar>
		</div>
		<div class="oe-real-name" v-loading="loading">
			<div class="oe-data-from">
				<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
					<a-form-model-item label="
					真实姓名" prop="real_name" ref="real_name">
						<a-input v-model="form.real_name" placeholder="请输入姓名" size="large" disabled />
					</a-form-model-item>
					<a-form-model-item label="身份证号" prop="number" ref="number">
						<a-input v-model="form.number" placeholder="请输入身份证号" size="large" disabled />
					</a-form-model-item>
				</a-form-model>

				<div class="next-step">
					<div class="next" @click="showRecognitionProtocol">
						下一步
					</div>
				</div>
			</div>
		</div>

		<!-- 人脸识别协议弹框 -->
		<a-modal width="50%" :maskClosable="false" centered :closable="true" v-model="protocolVisible" title="人脸识别协议" @ok="handleProtocolOk">
			<div class="desc">
				一、功能说明
				为保障用户账户的安全，提供更好的服务，广发基金在提供部分产品及服务之前，采用人脸识别核身验证功能对用户的身份进行认证，用于验证操作人是否为账户持有者本人，通过人脸识别结果评估是否为用户提供产品或服务。该功能由公安部身份认证平台、腾讯云、微众银行等机构提供核验数据及技术支持。

				<br> <br>
				二、授权与许可
				如您点击“确认”或以其他方式选择接受本协议规则，则视为您在使用人脸识别服务时，同意并授权广发基金获取、使用您在申请广发基金服务过程中所提供的个人信息（包括姓名、身份证号）及人脸影像数据，并提供给合法存有您信息的第三方合作机构进行比对核验，以核验您的身份。如您不同意本协议的任何内容，或者无法准确理解协议内容的解释，请不要进行后续操作。
				<br> <br>
				三、信息安全声明
				广发基金承诺对您的个人信息严格保密，并基于国家监管部门认可的加密算法进行数据加密传输，数据加密存储。如因不可抗力、计算机黑客袭击、系统故障、通讯故障、电脑病毒、恶意程序攻击及其他不可归因于广发基金的情况而导致用户损失的，广发基金不承担任何责任。广发基金与合作机构签订保密合同，并要求合作伙伴做好用户信息安全保障，承诺尽到信息安全保护义务。
				<br> <br>
				四、协议的效力及变更
				本协议在签署后立即生效，您在广发基金直销平台点击“确认”或以其他方式选择接受本协议规则，即视为对本协议的签订。在不损害用户利益的前提下，广发基金保留修改或增补本协议内容的权利，并以在广发基金官方网站通知的方式予以公布，无需另行单独通知您。若您在本协议内容通知变更后继续办理相关业务的，表示您已充分阅读、理解并接受变更后的协议内容，也将遵循变更后的协议内容办理相关业务。若您不同意变更后的协议内容，您应向广发基金提出终止本协议并停止办理相关业务。
				<br> <br>
				五、纠纷的解决办法
				因履行本协议的或与本协议有关的任何争议，由协议签订各方协商解决；协商不成的，各方一致同意提请中国基金业协会或广东证券期货业协会等进行调解。调解不成的，协议各方经协商一致可提请广州仲裁委员会并按其届时生效的仲裁规则进行仲裁，仲裁地点为广州，仲裁裁决是终局性，对当事人均有约束力，仲裁费用由败诉方承担。
			</div>

			<template #footer>
				<div class="footer">
					<div class="recognition" @click="facialRecognitionAcquisition">
						去认证
					</div>
				</div>
			</template>
		</a-modal>
	</div>
</template>
<script>
import infoBar from '../components/info-bar.vue';
export default {
	components: {
		infoBar,
	},
	data() {
		return {
			fenpeiModel: false,
			labelCol: { span: 4 },
			wrapperCol: { span: 18 },
			oldMobile: '',
			other: '',
			form: {
				real_name: '',
				number: '',
			},
			time: 60,
			title: '获取验证码',
			examTimer: '',
			// 数据加载
			loading: false,
			rules: {
				number: [{ required: true, trigger: 'blur' }],
				real_name: [{ required: true, trigger: 'blur' }],
			},
			visible: false,
			file_system_url: '',
			value: '',
			menu_title: '个人信息',
			submenu_title: '实名认证',
			protocolVisible: false,
		};
	},
	mounted() {
		this.getManagerInfo();
	},
	methods: {
		// 面部识别采集
		facialRecognitionAcquisition() {
			this.$message.success('面部识别采集');
		},
		showRecognitionProtocol() {
			// this.loading = true;
			this.protocolVisible = true;
		},
		handleProtocolOk() {
			this.protocolVisible = false;
		},
		handleOk(e) {
			this.visible = false;
		},
		getManagerInfo() {
			this.loading = true;
			this.$http.post('/api/common/accounts/getManagerInfo').then((res) => {
				this.loading = false;
				if (res.code > 0) {
					this.form.UserName = res.user.UserName;
					this.form.DisplayName = res.user.DisplayName;
					this.form.Email = res.user.Email;
					this.form.userNationalitySMS = res.userNationalitySMS;
					this.form.Mobile = res.user.Mobile;
					this.form.Address = res.user.Address;
					this.form.Sex = res.user.Sex;
					this.form.Remark = res.user.Remark;
					this.form.Code = '';
					this.file_system_url = res.file_system_url;
					this.oldMobile = res.user.Mobile;
					var rx = /^https?:\/\//i;
					if (rx.test(res.avatarUrl)) {
						this.avatarUrl = res.avatarUrl;
					} else {
						this.avatarUrl = 'https://cdn-zjy.icve.com.cn' + res.avatarUrl;
					}
					if (res.isUpdatePwd) {
						this.fenpeiModel = true;
					}
				} else {
					this.$message.error(res.msg);
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
@import './style/index.scss';
</style>